<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MCU任务管理配置</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
    <style>
        .config-container {
            padding: 20px;
            background-color: #f5f7fa;
            min-height: 100vh;
        }
        .section-card {
            background: #fff;
            border-radius: 8px;
            margin-bottom: 20px;
            box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        }
        .card-header {
            padding: 15px 20px;
            border-bottom: 1px solid #ebeef5;
            font-weight: bold;
            color: #303133;
        }
        .card-body {
            padding: 20px;
        }
        .priority-item {
            display: flex;
            align-items: center;
            margin-bottom: 15px;
            padding: 10px;
            border: 1px solid #e4e7ed;
            border-radius: 4px;
        }
        .priority-color {
            width: 4px;
            height: 24px;
            margin-right: 10px;
            border-radius: 2px;
        }
        .priority-urgent { background-color: #f56c6c; }
        .priority-high { background-color: #e6a23c; }
        .priority-normal { background-color: #409eff; }
        .priority-low { background-color: #67c23a; }
        .task-type-tag {
            margin: 5px;
        }
        .retention-form {
            max-width: 600px;
        }
        .status-tag {
            margin: 5px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div id="mcu-task-config">
        <div class="config-container">
            <el-tabs v-model="activeTab" type="border-card">
                <!-- 任务类型 -->
                <el-tab-pane label="任务类型" name="taskType">
                    <el-card class="section-card">
                        <div slot="header" class="card-header">
                            <i class='bx bx-list-ul'></i> MCU任务类型列表
                        </div>
                        <div class="card-body">
                            <el-table :data="taskTypeList" style="width: 100%">
                                <el-table-column prop="name" label="任务类型名称" width="180"></el-table-column>
                                <el-table-column prop="code" label="命令编码" width="150"></el-table-column>
                                <el-table-column prop="description" label="描述"></el-table-column>
                            </el-table>
                        </div>
                    </el-card>
                </el-tab-pane>

                <!-- 任务优先级管理 -->
                <el-tab-pane label="任务优先级" name="priority">
                    <el-card class="section-card">
                        <div slot="header" class="card-header">
                            <i class='bx bx-slider'></i> 任务优先级管理
                        </div>
                        <div class="card-body">
                            <div class="priority-item">
                                <div class="priority-color priority-urgent"></div>
                                <div class="priority-content">
                                    <h4>紧急任务（告警数据上报，告警联动任务）</h4>
                                    <el-tag size="small" type="danger">优先级01</el-tag>
                                </div>
                            </div>
                            <div class="priority-item">
                                <div class="priority-color priority-high"></div>
                                <div class="priority-content">
                                    <h4>高优先级（设备控制任务，设备采集任务）</h4>
                                    <el-tag size="small" type="warning">优先级02</el-tag>
                                </div>
                            </div>
                            <div class="priority-item">
                                <div class="priority-color priority-normal"></div>
                                <div class="priority-content">
                                    <h4>常规任务（定时数据采集）</h4>
                                    <el-tag size="small" type="primary">优先级03</el-tag>
                                </div>
                            </div>
                            <div class="priority-item">
                                <div class="priority-color priority-low"></div>
                                <div class="priority-content">
                                    <h4>低优先级（自动校时任务）</h4>
                                    <el-tag size="small" type="success">优先级04</el-tag>
                                </div>
                            </div>
                        </div>
                    </el-card>
                </el-tab-pane>

                <!-- 任务命令保留时长配置 -->
                <el-tab-pane label="任务命令保留时长" name="retention">
                    <el-card class="section-card">
                        <div slot="header" class="card-header">
                            <i class='bx bx-time'></i> 任务命令保留时长配置
                        </div>
                        <div class="card-body">
                            <div class="retention-form">
                                <el-form ref="retentionForm" :model="retentionForm" label-width="120px">
                                    <el-form-item label="任务分类">
                                        <el-select v-model="retentionForm.taskType" placeholder="请选择任务分类">
                                            <el-option v-for="type in taskTypes" 
                                                     :key="type.value" 
                                                     :label="type.label" 
                                                     :value="type.value">
                                            </el-option>
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item label="保留时长类型">
                                        <el-radio-group v-model="retentionForm.retentionType">
                                            <el-radio label="permanent">永久</el-radio>
                                            <el-radio label="temporary">指定时长</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                    <el-form-item label="保留时长(秒)" v-if="retentionForm.retentionType === 'temporary'">
                                        <el-input-number v-model="retentionForm.duration" 
                                                       :min="1" 
                                                       :step="1"
                                                       controls-position="right">
                                        </el-input-number>
                                    </el-form-item>
                                    <el-form-item>
                                        <el-button type="primary" @click="saveRetentionConfig">保存配置</el-button>
                                    </el-form-item>
                                </el-form>

                                <!-- 当前配置列表 -->
                                <el-table :data="retentionConfigs" style="width: 100%; margin-top: 20px">
                                    <el-table-column prop="taskType" label="任务分类" width="180"></el-table-column>
                                    <el-table-column prop="retention" label="保留时长" width="180"></el-table-column>
                                    <el-table-column label="操作">
                                        <template slot-scope="scope">
                                            <el-button size="mini" type="danger" @click="deleteRetentionConfig(scope.$index)">
                                                删除
                                            </el-button>
                                        </template>
                                    </el-table-column>
                                </el-table>
                            </div>
                        </div>
                    </el-card>
                </el-tab-pane>

                <!-- 任务状态配置 -->
                <el-tab-pane label="任务状态" name="status">
                    <el-card class="section-card">
                        <div slot="header" class="card-header">
                            <i class='bx bx-check-circle'></i> 任务状态配置
                        </div>
                        <div class="card-body">
                            <div class="status-list">
                                <el-tag class="status-tag" 
                                       v-for="status in taskStatuses" 
                                       :key="status.value"
                                       :type="status.type"
                                       effect="light">
                                    {{status.label}}
                                </el-tag>
                            </div>
                        </div>
                    </el-card>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>

    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script>
        new Vue({
            el: '#mcu-task-config',
            data() {
                return {
                    activeTab: 'taskType',
                    taskTypes: [
                        { value: 'alarm', label: '告警数据上报' },
                        { value: 'monitor', label: '定时数据采集' },
                        { value: 'collect', label: '告警联动任务' },
                        { value: 'status', label: '设备采集任务' },
                        { value: 'time', label: '自动校时任务' },
                        { value: 'control', label: '设备控制任务' }
                    ],
                    taskTypeList: [
                        { name: '定时数据采集', code: 'XX', description: '定期采集传感器数据' },
                        { name: '告警数据上报', code: '--', description: '设备告警数据上报' },
                        { name: '告警联动任务', code: '--', description: '告警触发后的联动任务' },
                        { name: '设备控制任务', code: '--', description: '设备控制相关任务' },
                        { name: '设备采集任务', code: '--', description: '设备数据采集任务' },
                        { name: '自动校时任务', code: '--', description: '设备时间自动校准任务' }
                    ],
                    retentionForm: {
                        taskType: '',
                        retentionType: 'temporary',
                        duration: 3600
                    },
                    retentionConfigs: [
                        { taskType: '告警任务', retention: '永久' },
                        { taskType: '实时监测任务', retention: '7天' },
                        { taskType: '定期采集任务', retention: '30天' }
                    ],
                    taskStatuses: [
                        { value: 'published', label: '已发布', type: 'primary' },
                        { value: 'dispatched', label: '已下发', type: 'warning' },
                        { value: 'executed', label: '已执行', type: 'success' },
                        { value: 'expired', label: '已过期', type: 'info' },
                        { value: 'deleted', label: '已删除', type: 'danger' }
                    ]
                }
            },
            methods: {
                saveRetentionConfig() {
                    const config = {
                        taskType: this.taskTypes.find(t => t.value === this.retentionForm.taskType).label,
                        retention: this.retentionForm.retentionType === 'permanent' ? 
                            '永久' : `${this.retentionForm.duration}秒`
                    };
                    this.retentionConfigs.push(config);
                    this.$message({
                        message: '配置保存成功',
                        type: 'success'
                    });
                },
                deleteRetentionConfig(index) {
                    this.retentionConfigs.splice(index, 1);
                    this.$message({
                        message: '配置删除成功',
                        type: 'success'
                    });
                }
            }
        })
    </script>
</body>
</html>